<template>
	<jk-dialog
		v-model="showDialog"
		:title="`${machineData.machineCode || ''}-运转详情`"
		width="1000px"
		:append-to-body="false"
		:show-close-btn="true"
		:show-confirm-btn="false"
		:show-cancel-btn="false"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<div>
			<div class="flex-center margin-bottom-10">
				<el-button>
					<div class="flex-center">
						<machine-run-state-icon :state="ruleForm.state"></machine-run-state-icon>
						<div style="font-size: 18px;font-weight: 700;letter-spacing: 1px;">{{ machineData.machineCode || '' }}</div>
					</div>
				</el-button>
			</div>
			<el-form ref="ruleForm" :model="ruleForm" label-width="120px" :show-message="false">
				<el-divider><i class="el-icon-tickets item-gap" style="font-size: 16px;"></i>排产信息</el-divider>
				<el-row ref="box1" class="flex-start-center-wrap">
					<el-col :span="8">
						<el-form-item class="margin-bottom-0" label="品种">
							<span class="read-only-2">{{ ruleForm.productName || '' }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-0" label="批号">
							<span class="read-only-2">{{ ruleForm.batchCode || '' }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-0" label="排产数量">
							<span class="read-only-2">{{ ruleForm.productionQty || '' }}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-divider><i class="el-icon-share item-gap" style="font-size: 16px;"></i>工艺信息</el-divider>
				<el-row class="flex-start-center-wrap">
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="机台锭数">
							<span class="read-only-2">{{ ruleForm.spinCount || '' }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="开台锭数">
							<span class="read-only-2">{{ ruleForm.openSpinCount || '' }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="设定长度">
							<span class="read-only-2">{{ ruleForm.settingLength || '' }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-0" label="当前长度">
							<span class="read-only-2">{{ ruleForm.currentLength || '' }}</span>
						</el-form-item>
					</el-col>
					<!--<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="捻度">
							<span class="read-only-2">{{ ruleForm.shippingTime || '' }}</span>
						</el-form-item>
					</el-col>-->
					<!--<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="牵引(伸)倍数">
							<span class="read-only-2">{{ ruleForm.remark || '' }}</span>
						</el-form-item>
					</el-col>-->
					<!--<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="锭速">
							<span class="read-only-2">{{ ruleForm.speed || '' }}</span>
						</el-form-item>
					</el-col>-->
					<!--<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="前罗拉直径">
							<span class="read-only-2">{{ ruleForm.remark || '' }}</span>
						</el-form-item>
					</el-col>-->
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="前罗拉转速">
							<span class="read-only-2">{{ ruleForm.speed || '' }}</span>
						</el-form-item>
					</el-col>
					<!--<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="前罗拉线速">
							<span class="read-only-2">{{ ruleForm.remark || '' }}</span>
						</el-form-item>
					</el-col>-->
					<el-col :span="8">
						<el-form-item class="margin-bottom-0" label="累计总产量(M)">
							<span class="read-only-2">{{ ruleForm.totalM || '' }}</span>
						</el-form-item>
					</el-col>
					<!--<el-col :span="8">
						<el-form-item class="margin-bottom-0" label="累计总产量(kg)">
							<span class="read-only-2">{{ ruleForm.totalKg || '' }}</span>
						</el-form-item>
					</el-col>-->
				</el-row>
				<el-divider><i class="el-icon-odometer item-gap" style="font-size: 16px;"></i>能耗信息</el-divider>
				<el-row class="flex-start-center-wrap">
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="A相电流">
							<span class="read-only-2">{{ ruleForm.aelectricCurrent || '' }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="B相电流">
							<span class="read-only-2">{{ ruleForm.belectricCurrent || '' }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="C相电流">
							<span class="read-only-2">{{ ruleForm.celectricCurrent || '' }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="A相电压">
							<span class="read-only-2">{{ ruleForm.avoltage || '' }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="B相电压">
							<span class="read-only-2">{{ ruleForm.bvoltage || '' }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="C相电压">
							<span class="read-only-2">{{ ruleForm.cvoltage || '' }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="总功率">
							<span class="read-only-2">{{ ruleForm.totalPower || '' }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="总电能">
							<span class="read-only-2">{{ ruleForm.totalEnergyConsumption || '' }}</span>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import { reportMachineStateInfo } from '../../../api/production/productionMonitor';
    import machineRunStateIcon from './components/machine-run-state-icon';
    export default {
        components: {
            machineRunStateIcon
        },
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            machineData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mixins: [calHeight],
        data() {
            return {
                timer: {},
                activeTab: '0',
                showDialog: false,
                showLoading: false,
                ruleForm: {
                    state: 0

                },
                tableData: []
            };
        },
        methods: {
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    clearInterval(this.timer);
                    Object.assign(this.$data, this.$options.data());
                    this.$nextTick(() => {
                        this.$refs.ruleForm.resetFields();
                    });
                }
            },
            getListRequest() {
                if (this.ruleForm.productOrderCode) {
                }
            },
            getDetailRequest() {
                if (this.machineData.machineId) {
                    this.showLoading = true;
                    return reportMachineStateInfo({ machineId: this.machineData.machineId }).then(res => {
                        this.showLoading = false;
                        if (res.data.status === 200) {
                            const resData = res.data.res || {};
                            this.ruleForm = resData;
                        }
                    });
                }
            },
            run() {
                this.clearTimer();
                this.getDetailRequest();
                this.timer = setInterval(() => {
                    this.getDetailRequest();
                }, 5000);
            },
            clearTimer() {
                clearInterval(this.timer);
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.run();
                }
            }
        },
        destroyed() {
            this.clearTimer();
        }
    };
</script>

